<!-- 记住我功能测试页面 -->
<template>
    <div class="test-remember-me">
        <h2>记住我功能测试</h2>

        <div class="test-section">
            <h3>当前登录状态</h3>
            <p>是否已登录: {{ isLoggedIn ? '是' : '否' }}</p>
            <p>用户信息: {{ userInfo ? JSON.stringify(userInfo, null, 2) : '无' }}</p>
            <p>记住我状态: {{ rememberMeStatus }}</p>
        </div>

        <div class="test-section">
            <h3>存储信息</h3>
            <div class="storage-info">
                <h4>localStorage:</h4>
                <pre>{{ localStorageInfo }}</pre>

                <h4>sessionStorage:</h4>
                <pre>{{ sessionStorageInfo }}</pre>
            </div>
        </div>

        <div class="test-section">
            <h3>测试操作</h3>
            <el-button @click="testLoginWithRemember">测试登录（记住我）</el-button>
            <el-button @click="testLoginWithoutRemember">测试登录（不记住我）</el-button>
            <el-button @click="testLogout">测试登出</el-button>
            <el-button @click="clearAllStorage">清除所有存储</el-button>
        </div>

        <div class="test-section">
            <h3>导航</h3>
            <el-button @click="$router.push('/login')">去登录页面</el-button>
            <el-button @click="$router.push('/')">返回首页</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { isLoggedIn as checkIsLoggedIn, getUserInfo, login, logout } from '../utils/auth'

// 响应式数据
const isLoggedIn = ref(false)
const userInfo = ref(null)
const rememberMeStatus = ref('')
const localStorageInfo = ref('')
const sessionStorageInfo = ref('')

/**
 * 更新显示信息
 */
const updateDisplay = () => {
    isLoggedIn.value = checkIsLoggedIn()
    userInfo.value = getUserInfo()

    // 检查记住我状态
    const localRememberMe = localStorage.getItem('rememberMe')
    const sessionRememberMe = sessionStorage.getItem('rememberMe')

    if (localRememberMe === 'true') {
        rememberMeStatus.value = 'localStorage (持久化)'
    } else if (sessionRememberMe === 'false') {
        rememberMeStatus.value = 'sessionStorage (会话)'
    } else {
        rememberMeStatus.value = '未登录'
    }

    // 显示存储信息
    const localData = {
        isLoggedIn: localStorage.getItem('isLoggedIn'),
        userInfo: localStorage.getItem('userInfo'),
        rememberMe: localStorage.getItem('rememberMe'),
        savedEmail: localStorage.getItem('savedEmail')
    }

    const sessionData = {
        isLoggedIn: sessionStorage.getItem('isLoggedIn'),
        userInfo: sessionStorage.getItem('userInfo'),
        rememberMe: sessionStorage.getItem('rememberMe')
    }

    localStorageInfo.value = JSON.stringify(localData, null, 2)
    sessionStorageInfo.value = JSON.stringify(sessionData, null, 2)
}

/**
 * 测试登录（记住我）
 */
const testLoginWithRemember = () => {
    const testUser = {
        email: 'test@example.com',
        nickname: '测试用户'
    }
    login(testUser, true)
    updateDisplay()
}

/**
 * 测试登录（不记住我）
 */
const testLoginWithoutRemember = () => {
    const testUser = {
        email: 'test@example.com',
        nickname: '测试用户'
    }
    login(testUser, false)
    updateDisplay()
}

/**
 * 测试登出
 */
const testLogout = () => {
    logout()
    updateDisplay()
}

/**
 * 清除所有存储
 */
const clearAllStorage = () => {
    localStorage.clear()
    sessionStorage.clear()
    updateDisplay()
}

// 页面加载时更新显示
onMounted(() => {
    updateDisplay()
})
</script>

<style scoped lang="scss">
.test-remember-me {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;

    h2 {
        color: #2c3e50;
        margin-bottom: 2rem;
    }

    .test-section {
        margin-bottom: 2rem;
        padding: 1rem;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        background: #f8f9fa;

        h3 {
            color: #495057;
            margin-bottom: 1rem;
        }

        h4 {
            color: #6c757d;
            margin: 1rem 0 0.5rem 0;
        }

        .storage-info {
            pre {
                background: #f1f3f4;
                padding: 1rem;
                border-radius: 4px;
                font-size: 0.9rem;
                overflow-x: auto;
            }
        }

        .el-button {
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
    }
}
</style>
